<script setup>
import {  ref, onMounted} from 'vue';
import { ElMessage } from 'element-plus';
import { userStatusMap} from '@/utils/dict';
import { queryFeedbackList } from '@/apis/workorderAPI';
// 1. 表格数据源必须是数组（每个元素对应一行）
const feedbackList = ref([]);
// 搜索方法
const handleSearch = () => {
  params.value.pageNo=1;
  fetchData();
}

onMounted(async () => {
  await fetchData();
});

const currentPage = ref(1);      // 当前页码
const pageSize = ref(10);         // 每页条数

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;  // 重置为第一页
  fetchData();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};
const total=ref(0);
const params=ref({
  pageNo:'',
  pageSize:'',
  startDate:'',
  status:''
}
)
const fetchData=async()=>{
  try{
    params.value.pageNo=currentPage.value;
    params.value.pageSize=pageSize.value;
    const { data } = await queryFeedbackList(params.value);
    const { records } = data;
    feedbackList.value=records;
    total.value=data.total;
    // ElMessage.success("加载成功");
  }catch{
    ElMessage.error("加载失败");
  }
}
</script>
<template>
  <div class="container">
    <div class="employeeList-header">
     <div class="search-box">
         <el-date-picker  v-model="params.startDate" type="date"  placeholder=" 创建时间"  style="margin-left: 10px; width: 150px;"  value-format="YYYY-MM-DDTHH:mm:ss.000Z"/>
        <el-button type="primary" @click="handleSearch" style="margin-left: 10px;"> 搜索</el-button>
     </div>
    </div>
    <!-- 表格必须绑定数组数据 -->
    <div class="table_container">
    <el-table :data="feedbackList"  border style="width: 900px; margin-top: 20px; min-height:100%;">
      <el-table-column label="工单标题" prop="feedbackList.workOrderInfo.title" min-width="80%" >
      </el-table-column>
      <el-table-column label="客户类型" prop="feedbackList.customerInfo.type"/>
      <el-table-column label="客户姓名" prop="feedbackList.customerInfo.customerName"/>
      <el-table-column label="星级" min-width="150" width="150">
        <template #default="scope">
          <el-rate v-model="scope.row.rating" text-color="#ff9900" score-template="{value}" disabled/>
        </template>
      </el-table-column>
      <el-table-column label="评价" prop="comment"/>
      <el-table-column label="状态" prop="status"  min-width="80%"  type="number">
        <template #default="scope">
          <el-tag type="priamry" v-if="scope.row.status === 1">{{ userStatusMap[scope.row.status] ?? '未知' }}</el-tag>
          <el-tag type="error" v-if="scope.row.status === 0">{{ userStatusMap[scope.row.status] ?? '未知' }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" style="margin-top: 15px; text-align: right;">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        page-sizes=10
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    </div>
   </div>
</template>

<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: white;
  min-height: 100vh; /* 使用100vh确保占满视口高度，100%可能因父元素高度问题无效 */
  width: 100%;
  display: flex; /* 开启Flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 垂直从顶部开始排列，可根据需要调整 */
}
.employeeList-header {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding-left: 15px;
  padding-right: 15px; /* 右侧留与左侧相同的间距 */
  width: calc(100% - 30px);
  margin: 0 auto;
  box-sizing: border-box;
  margin-bottom: 15px; /* 与下方表格保持距离 */
}
.search-box {
  padding-left: 15px;
  display: flex; /* 使用Flex布局使输入框和按钮横向排列 */
  align-items: center; /* 垂直居中对齐 */
  width: calc(100% - 30px);
  margin: 0 auto;
  box-sizing: border-box;
}
.btn{
  display: flex;
  gap: 2px;
}
.pagination-container {
  // padding: 10px 0;
  align-items: center;
}

/* 表格容器 */
.table_container {
  background-color: white;
  height: 300px;
  width: calc(100% - 30px); /* 宽度与搜索框一致 */
  margin-left: 35px; /* 左侧外边距15px，与搜索框padding-left匹配 */
  margin-top: 40px;
  box-sizing: border-box; /* 避免边框/内边距影响宽度 */

}
.title-link {
  color: #409eff; /* 蓝色，模拟链接样式 */
  cursor: pointer;
  text-decoration: underline; /* 下划线，增强可点击提示 */
}

</style>
